因為近期公司的官網翻新，才意外地踩到這個坑
就趁著鐵人賽的機會，來紀錄一下這個問題
也希望跟各位交流，互相分享更好用的解法唷～～

先簡述一下這次問題發生的背景情境：
官網的設計需求是，首頁切分為幾個區塊，每個區塊的內容要剛好塞在 Container 內～
所以在一開始撰寫 CSS 時，在電腦版就自然而然直接寫上

.wrap {
    height: 100vh;
}

結果在檢查的時候卻發現 內容 在 Safari 會被切掉，但在 Chrome、Firefox 上卻一切正常...

而輸入關鍵字 Safari 100vh Google 之後才發現這已是很多人都會踩到的雷...
有網友詢問 Apple Safari 團隊這個 "Bug" 何時會修復？
竟然得到技術團隊回覆說：

that it wasn’t a bug, it’s a feature. 參考文章

咦？ 原來這不是 Bug，而且我在找資料的時候也有看到其他網友有說現在手機版的 Chrome 也有類似的情況
原因我後來沒有繼續追，有找到緣由的捧油也歡迎在底下分享唷～

首先，先上一張圖來看看目前我們遇到的問題～

在其他瀏覽器，我們的 Container 都會照著我們想要的 內容撐滿整個視窗（不含網址列與手機功能列）
Safari 則是會把 內容、網址列與手機功能列計入高度
而造成網頁內容呈現在 Safari 時上下都會有部分被切掉

那要怎麼解決呢？
網路上有各種解決方式，我也會整理我之前找到的資料貼給大家參考
而這邊主要介紹的是我使用在公司官網上的解法：

**CSS 原生變數 ＋ JavaScript**

CSS：

.wrap {
    height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
    height: calc(var(--vh, 1vh) * 100);
}

JavaScript：

function safariHacks() {
    let windowsVH = window.innerHeight / 100;
    document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    window.addEventListener('resize', function() {
        document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
    });
}

safariHacks();

Reference Data

• The trick to viewport units on mobile
• stack overflow - Chrome / Safari not filling 100% height of flex parent
• 解決高度100vh在safari手機上的問題
• 手機的 safari, chrome 瀏覽器 100vh 的問題
• Mobile view height的通透世界
• CSS fix for 100vh in mobile WebKit